<template>
  <div class="base__table">
    <div class="base__table-panel">
      <div class="base__table-title">
        <div class="text">入库记录列表</div>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="isShowCreateDialog = true">添加入库信息</el-button>
        </div>
      </div>
      
      <base-search ref="baseSearch" :formList="searchFormList" @search="search"></base-search>
  
      <el-table :data="tableData" v-loading="tableLoading">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="订单编号" prop="orderCode"></el-table-column>
        <el-table-column label="批次" prop="batch"></el-table-column>
        <el-table-column label="仓位" prop="position"></el-table-column>
        <el-table-column label="签收人" prop="recipient"></el-table-column>
        <el-table-column label="入库时间">
          <template slot-scope="{ row }">{{ format_dateTime(row.createTime) }}</template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>

      
      <!-- 添加入库信息 -->
      <el-dialog
        :visible.sync="isShowCreateDialog"
        :close-on-click-modal="false"
        title="添加入库信息"
        width="850px">
        <create
          v-if="isShowCreateDialog"
          @success="createSuccess"
          @close="isShowCreateDialog=false">
        </create>
      </el-dialog>

    </div>
  </div>
</template>


<script>

import { transformDisplayName, dict_productionType } from '@/utils/dictionary'
import { format_null, format_date, format_dateTime } from '@/utils/formatter'

import BaseSearch from '@/components/BaseSearch'

import Create from './Create'

import { listApi } from '@/api/modules/warehouse/in'

export default {
  name: 'InWarehouseTable',
  components: {
    BaseSearch,
    Create,
  },
  data () {
    return {
      dict_productionType,
      
      searchFormList: [
        { label: '订单编号', prop: 'orderCode', type: 'text' },
        { label: '批次', prop: 'batch', type: 'text' },
        { label: '接收人', prop: 'recipient', type: 'text' },
        { label: '入库时间', prop: 'date', type: 'date' },
      ],
      searchForm: {
        orderCode: null,
        batch: null,
        recipient: null,
        date: null
      },

      tableData: [],
      tableLoading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },

      isShowCreateDialog: false,

      currentActionRow: null,

    }
  },
  methods: {
    format_dateTime,
    transformDisplayName,

    
    search(formData) {
      this.pageInfo.pageNum = 1
      this.searchForm = { ...formData }
      this.getList()
    },
    async getList() {
      try {

        this.tableLoading = true

        const params = {
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.searchForm
        }
        if((params.date ?? '') !== '') {
          params.date = format_date(params.date)
        }
        const res = await listApi(params)

        const { list, total } = res.data
        this.tableData = format_null(list)
        this.pageInfo.total = total

      } catch (err) {
        console.error(err)
      }
      this.tableLoading = false

    },
    handlePageSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    handlePageNumChange(pageNum) {
      this.pageInfo.pageNum = pageNum
      this.getList()
    },
    

    // 创建
    showCreateDialog() {
      this.isShowCreateDialog = true
    },
    createSuccess() {
      this.isShowCreateDialog = false
      this.getList()
    }

  },
  mounted() {
    this.getList()
  }
}
</script>


<style lang="less" scoped>
@import '../../../styles/tablePanel.less';
</style>